import React, { Component } from 'react'
import { Timeline, message } from 'antd'
import u from '../../../common.js'
import '../../../static/routineMonitoring/friendCircle.less'
import $ from 'jquery'

class Friendqun extends Component {
  constructor(props) {
    super(props)
    this.state = {
      keyWordList: [],
      colorFlag: false,//搜索框
      colorFlag2: false,
      flag: true,//浮框关注人列表状态切换
      FriendList: [],
      filter: [],//过滤后的公众号
      type: '0',
      startTime: '',
      endTime: '',
      detailsList: [],//定义朋友圈动态的数组
      friendTotal: '',//朋友圈动态总条数
      hitTotal: null,//关键词条数
      hit: null,//指定用户的关键条数
      total: '',//用户条数
      keyWordName: '',
      userid: '',
      bgFlage: 0,
      peopleList: [],//重新定义一个用户名的列表
      closeBtn1: false,//右侧搜索框叉图片的显示隐藏
      closeBtn2: false,//左侧搜索框叉图片的显示隐藏
      friendName: '',//左侧搜索框值
      isCollect: '',//是否关注
      choseDate: 10,//时间筛选部分
      titleName: '',
      friendFresh: 0,
      mainId: [],
      id: '',
      name: '',
      scrollTopLength: null
    };

  }

  componentDidMount() {
    // 筛选预警关键词
    u.selectWord(data => {
      if (!data) return
      this.setState({
        keyWordList: data.data
      })
    })
    this.getFriendList();
    this.peopleList();
    // console.log(decodeURIComponent(this.props.location.search.split('&')[1].split('=')[1]))
    if (this.props.location.search) {
    
      let url = this.props.location.search.split('&');
      this.appointUser(url[0].split('=')[1], decodeURIComponent(url[1].split('=')[1]))
      return
    }

    this.getFriendDetails();//一进入页面朋友圈动态渲染

  }
  //朋友圈重点人列表
  getFriendList() {
    let startTime = this.state.startTime
    let endTime = this.state.endTime
    let id = localStorage.getItem('userId')
    u.getNearByFrindList({
      startTime: startTime,
      endTime: endTime,
      userId: id
    }, data => {
      if (!data) return
      this.setState({
        FriendList: data,
        total: data.length,
        filter: data,
      })
    })
  }
  //朋友圈重点人动态详情,刚进入页面或者点击预警
  getFriendDetails() {
    let startTime = this.state.startTime
    let endTime = this.state.endTime
    this.setState((props, prevState) => ({
      userid: '',
      bgFlage: 0,
      titleName: '',
      friendFresh: 0
    }))
    u.getFriendcircleDetails({
      type: '1',
      startTime: startTime,
      endTime: endTime,
    }, data => {
      if (!data) return
      this.setState({
        detailsList: data.result,
        friendTotal: data.FriendTotal,
        hitTotal: data.hit,
      })
    })
  }
  //点击指定用户 查看其朋友圈
  appointUser(id, titleName) {
    let startTime = this.state.startTime
    let endTime = this.state.endTime
    this.setState((props, prevState) => ({
      userid: id,
      bgFlage: id,
      titleName: titleName,
      friendFresh: id
    }))
    u.getFriendcircleDetails({
      type: '2',
      userId: id,
      startTime: startTime,
      endTime: endTime
    }, data => {
      if (!data) return
      this.setState({
        detailsList: data.result,
        friendTotal: data.FriendTotal,
        hit: data.hit,
      })
    })
  }
  //搜索关键词
  allKeyWords() {
    let startTime = this.state.startTime
    let endTime = this.state.endTime
    let keyWord = this.state.keyWordName

    u.getFriendcircleDetails({
      type: '0',
      startTime: startTime,
      endTime: endTime,
      keyWord: keyWord,
      userId: this.state.userid
    }, data => {
      if (!data) return
      this.setState({
        detailsList: data.result,
        friendTotal: data.FriendTotal,
        hitTotal: data.hit,
        hit: data.hit,
      })
    })
  }
  //右侧搜索
  onSearchWord(e) {
    this.setState({
      keyWordName: e
    }, () => {
      let wordLength = this.state.keyWordName.trim()
      if (wordLength.length > 0) {
        this.setState({
          closeBtn1: true
        })
      } else {
        this.setState({
          closeBtn1: false
        })
      }
    })
  }

  //时间筛选
  onChoseTime(num) {
    let endTime = u.getDate(0, true)
    let startTime = u.getDate(num, false)
    this.setState({
      startTime: num === 10 ? '' : startTime,
      endTime: num === 10 ? '' : endTime,
      choseDate: num
    }, () => {
      this.getFriendDetails()
      this.getFriendList()
    })
  }


  onMouseMove(flag) {
    this.setState({
      colorFlag: !this.state.colorFlag
    })
  }

  onMouseMove2(flag) {
    this.setState({
      colorFlag2: !this.state.colorFlag2
    })
  }
  // 重点人关注浮框显示隐藏
  mainPouple() {
    this.setState({
      flag: !this.state.flag
    }, () => {
      let status = this.state.flag
      if (status == true) {
        this.peopleList()
      }
    })
  }
  //左侧搜索朋友圈人的昵称
  blockContent(val) {
    this.setState({
      friendName: val
    }, () => {
      let wordLength = this.state.friendName.trim()
      if (wordLength.length > 0) {
        this.setState({
          closeBtn2: true
        })
      } else {
        this.setState({
          closeBtn2: false
        })
      }
    })

    this.setState((prevState, props) => ({
      filter: this.state.FriendList.filter((item) => {
        return item.user_name.includes(val)
      })
    }))

    
  }
  //右侧清空搜索框
  cancleVal() {
    document.getElementById('friendSearch2').value = ''
    this.setState({
      closeBtn1: false
    })

    if (this.state.bgFlage == 0) {
      this.getFriendDetails()
    } else {
      this.appointUser(this.state.userid, this.state.titleName)
    }
  }
  //点击回到顶部
  goTop() {
    let bigBox = document.querySelector('.yujingDetail');
    bigBox.scrollTop = 0
  }

  onDingWei2(e) {
    this.setState({
      scrollTopLength: e.target.scrollTop
    })
  }
  //添加重点人关注
  friendAdd(Id) {
    let id = localStorage.getItem('userId')
    u.friendAddAttention({
      id: Id,
      userId: id
    }, data => {
      if (this.state.bgFlage == 0) {
        this.getFriendDetails()
        this.peopleList()
        message.success('关注成功');
        return
      } else {
        this.appointUser(Id, this.state.titleName)
        this.peopleList()
        message.success('关注成功');
      }
    })
  }
  //取消重点人关注
  friendCancel(Id) {
    let id = localStorage.getItem('userId')
    u.friendCancelAttention({
      id: Id,
      userId: id
    }, data => {
      if (this.state.bgFlage == 0) {
        this.peopleList()
        this.getFriendDetails()
        message.success('取消成功');
      } else {
        this.peopleList()
        // this.appointUser(Id)
        message.success('取消成功');
      }

    })
  }
  //重点人关注列表
  peopleList() {
    let mainId = [];
    let id = localStorage.getItem('userId')
    u.getMainList({
      userId: id
    }, data => {
      data.forEach(index => {
        let isCollect = index.isCollect;
        mainId.push(index.id)
        this.setState({
          isCollect: isCollect,
        })
      });
      this.setState({
        mainId: mainId
      })
      this.setState({
        peopleList: data,
      })


    })
  }
  //左侧侧搜索框内容清空
  clear() {
    document.getElementById('friendSearch').value = ''
    this.setState({
      closeBtn2: false,
      friendName:''
    })
    this.getFriendList()
  }

  // 图片加载失败
  handleImageErrored(e) {
    e.target.src = require('../../../static/image/morentouxiang.png')
  }
//搜索框添加回车事件
  handleKeydown=(e)=>{
  if(e.keyCode===13){
    this.allKeyWords()
  }
  }

  render() {
    return (<div className="friendCircle">
      <div className='friendCircleBox leftstyle'>
        <div className="searchBox">
          <img className="searchStyle1" src={require("../../../static/image/seacrchh.png")} />
          <input id='friendSearch' className={this.state.colorFlag ? 'inputStyle hover' : 'inputStyle'} onFocus={this.onMouseMove.bind(this, true)} onBlur={this.onMouseMove.bind(this, false)} onKeyUp={(e) => { this.blockContent(e.target.value) }} type="text" placeholder="搜索" />
          {this.state.closeBtn2 == true ? <img className="cancelStyle" src={require("../../../static/image/cancel.png")} onClick={this.clear.bind(this)} /> : ''}

        </div>
        <div className='leftContent'>
          <div className={this.state.bgFlage == 0 ? 'yujingtishi bgColor' : 'yujingtishi'}>
            <div className='tishi_left'>
              <img src={require('../../../static/image/jinggao_03.png')} />
            </div>
            <div className='tishi_right' onClick={this.getFriendDetails.bind(this)}>
              <div className='right_top'>朋友圈预警({this.state.hitTotal ? this.state.hitTotal : 0})</div>
              <div className='testList'>朋友圈检测总览</div>
            </div>
          </div>
          {this.state.filter.map((item, index) => {
            return (<div className={this.state.bgFlage == item.id ? 'listDetail bgColor' : 'listDetail'} key={index} onClick={this.appointUser.bind(this, item.id, item.user_name)}>
              <div className='listPic'>
                {/* <img src={require('../../../static/image/jinggao_03.png')} /> */}
                <img src={u.imgUrl + item.head_portrait} onError={this.handleImageErrored.bind(this)} />
              </div>
              <div className='listContent'>
                <div className='listTop' 
                dangerouslySetInnerHTML={{__html: item.user_name.replace(this.state.friendName,'<span style="color:#5287ff;">'+this.state.friendName+'</span>')}}
                ></div>&nbsp;
                <span className='shuliang'>({item.publish_total})</span>
                <div className='listButton'>
                  <span>微信号:{item.id}</span>
                </div>
              </div>
            </div>
            )
          })}

        </div>
      </div>

      <div className='friendCircleBox middle'>
        <div className='title'>
          <div className="title_left">{this.state.titleName && this.state.bgFlage !== null ? this.state.titleName : '朋友圈预警'}<span>{this.state.titleName && this.state.bgFlage !== null ? this.state.hit ? this.state.hit : 0 : this.state.hitTotal ? this.state.hitTotal : 0}</span> <span>/{this.state.friendTotal ? this.state.friendTotal : 0}</span></div>
          <div className="title_right">
            <div className="right_postion">
              <img className="searchStyle" src={require("../../../static/image/search.png")} onClick={this.allKeyWords.bind(this)} />
              <input id='friendSearch2' className={this.state.colorFlag2 ? 'inputStyle hover' : 'inputStyle'} onFocus={this.onMouseMove2.bind(this, true)} onBlur={this.onMouseMove2.bind(this, false)}
                onChange={(e) => { this.onSearchWord(e.target.value) }} onKeyDown={this.handleKeydown.bind(this)} type="text" placeholder="搜索关键词…" />
              {this.state.closeBtn1 == true ? <img className="cancelStyle" src={require("../../../static/image/cancel.png")} onClick={this.cancleVal.bind(this)} autocomplete="off" /> : ''}

            </div>
          </div>
        </div>
        {/* 添加重点人部分 */}
        {this.state.flag ?
          <div className="hidden">
            {this.state.peopleList.map((item, index) => {
              return (<div className='zhezhaoList' key={index} >
                {/* <img className='zhezhaotouxiang' src={require('../../../static/image/jinggao_03.png')} /> */}
                <img className='zhezhaotouxiang' src={u.imgUrl + item.head_portrait} onError={this.handleImageErrored.bind(this)} />
                <div className='zhezhaoContent'>
                  <div className='zhezhaoTop'>
                    <div>{item.user_name}</div>
                    <div className='pointer' onClick={this.friendCancel.bind(this, item.id)}><img className='zhezhaotouxiang' src={require('../../../static/image/jianhao.png')} /></div>
                  </div>
                  <div>微信号:{item.id}</div>
                </div>
              </div>
              )
            })}

          </div> : ''
        }
        {this.state.flag && this.state.mainId.length !== 0 ? <div className='sanjiao'><img src={require('../../../static/image/sanjiao_03.png')} /></div> : ''
        }


        <div className='zhezhao'>
          <img className='imgStyle1' src={require('../../../static/image/zhezhaorentou.png')} onClick={this.mainPouple.bind(this)} />
          {/* 回到顶部 */}
          {this.state.scrollTopLength >= 300 ? <img className='imgStyle2' src={require('../../../static/image/retract.png')} onClick={this.goTop.bind(this)} /> : ''}

        </div>
        <div className='yujingDetail' onScroll={(e) => { this.onDingWei2(e) }}>
        {this.state.detailsList.length!==0?
         <Timeline>
         {this.state.detailsList.map((item, index) => {
           return (<Timeline.Item key={index}><span className='detailTimeStyle'>{item.media_createTime}</span>
             <div className='itemList'>
               <div className='touxiang'>
                 {/* <img src={require('../../../static/image/jinggao_03.png')} /> */}
                 <img src={u.imgUrl + item.headPortrait} onError={this.handleImageErrored.bind(this)} />
               </div>
               <div className='detailList'>
                 <div className='detailTitle'>
                   {item.userName}    <div className='add' onClick={this.friendAdd.bind(this, item.userId)}>
                     {this.state.mainId.length && this.state.mainId.indexOf(item.userId) !== -1 ? '' : <img src={require('../../../static/image/add_06.png')} />}
                   </div>
                   <div className='listAddcontent'>{this.state.mainId.length && this.state.mainId.indexOf(item.userId) !== -1 ? '已关注' : ''}</div>
                 </div>
                 <div className='detailContent' dangerouslySetInnerHTML={{ __html: item.media_content }}></div>
               </div>
             </div>
           </Timeline.Item>
           )
         })}
       </Timeline>:
        <div className='nothing'>
        <div className='nothing_pos'>
          <div>
            <img src={require('../../../static/image/nothing.png')}/>
          </div>
          <div className='zhanwuneirong'>暂无内容</div>
        </div>
      </div>
      }
         
        </div>
      </div>
      <div className='friendCircleBox right'>
        <div className='title'>筛选信息</div>
        <div className='yujingBox1'>
          <div className='yujingKeyWrod'>预警关键词</div>
          <div className='keyWord'>
            {
              this.state.keyWordList.map((item, index) => {
                return (
                  <div key={index}>
                    {item.name}
                  </div>
                )
              })
            }
          </div>
        </div>
        <div className="timeStyle">时间</div>
        <div className="timeKeyWord">
          <div onClick={this.onChoseTime.bind(this, 10)}
            className={this.state.choseDate === 10 ? 'allKeyWord' : 'keyWordTime'}>全部</div>
          <div onClick={this.onChoseTime.bind(this, 0)}
            className={this.state.choseDate === 0 ? 'allKeyWord' : 'keyWordTime'}>近一日</div>
          <div onClick={this.onChoseTime.bind(this, 3)}
            className={this.state.choseDate === 3 ? 'allKeyWord' : 'keyWordTime'}>近三日</div>
          <div onClick={this.onChoseTime.bind(this, 7)}
            className={this.state.choseDate === 7 ? 'allKeyWord' : 'keyWordTime'}>近一周</div>
        </div>
      </div>

    </div>
    )
  }
}

export default Friendqun